<template>
  <div style="">
    <card>
    <Form>
      <Row>
        <Col :span="24">
        <FormItem label="原密码" prop="code" style="width:300px">
          <Input type="password" v-model="formData.password"/>
        </FormItem>
        </Col>
      </Row>
      <Row>
        <Col :span="24">
        <FormItem label="新密码" prop="name" style="width:300px">
          <Input type="password" v-model="formData.newPassword"/>
        </FormItem>
        </Col>
      </Row>
      <Row>
        <Col :span="24">
        <FormItem label="确认密码" prop="memo" style="width:300px">
          <Input type="password" v-model="formData.confirmPassword"/>
        </FormItem>
        </Col>
      </Row>
    </Form>
      <div>
        <Button type="primary" icon="ios-paper-plane" :loading="submitLoading" @click="submitForm">提交</Button>
        <!--<Button >重置</Button>-->
      </div>
    </card>

  </div>

</template>
<script>
  import axios from '@/libs/api.request'
  import { mapActions } from 'vuex'
  export default {
    data () {
      return {
        submitLoading: false,
        formData: {
          password: '',
          newPassword: '',
          confirmPassword: ''
        }
      }
    },
    methods: {
      ...mapActions([
        'handleLogOut'
      ]),
      submitForm () {
        if (this.formData.newPassword === this.formData.confirmPassword) {
          this.submitLoading = true
          axios.request({
            url: '/user/changePassword',
            method: 'post',
            data: this.formData
          }).then(res => {
            this.submitLoading = false
            if (res.data.code == 200) {
              this.$Message.success('操作成功,请重新登录')
              this.handleLogOut().then(() => {
                this.$router.push({
                  name: 'login'
                })
              })
            }
            if (res.data.code == 201) {
              this.$Message.error('原密码输入不正确')
            }
          })
        } else {
          this.$Message.warning('两次密码不一致')
        }
      }
    }
  }
</script>
